<template>
	<view>
		<o-navbarx :back="true" color="#000000" :isback="true" background="transparent">
			<template #left_conent>
				<view class="pad-lr-20 pad-tb-14 display-sb align-items">
					<image src="/static/img/icon_fanhui.png" class="proudct-item-icon-24" mode=""></image>
					<view class="ml10 fontSize-28">积分明细</view>
				</view>
			</template>
		</o-navbarx>
		
		<view class="pad-lr-30 hetop">
			<view class="pad-lr-10 mar-top-20 radius-16 my_bi_view over-hid display align-items-start">
				<view class="display-sb align-items-end width-100">
					<view class="display align-items-end">
						<view class="ml30">
							<view class="col-f fontSize-30 mar-top-30">积分余额</view>
							<view class="col-f fontSize-32 mar-top-30 fontBold">{{userScore || 0}}</view>					
						</view>
					</view>
				</view>
			</view>
			
			<view class="mar-top-40 fontSize-32 display-sb align-items">
				<view class="display align-items">
					<view class="fontBold">积分明细</view>
				</view>
				
				<view class="display align-items" @click="openshowwin">
					<image src="/static/img/icon_shaixuanshijian.png" class="proudct-item-icon-24" mode=""></image>
					<view class="ml10 fontSize-28 col-6">筛选时间</view>
				</view>
			</view>
			
			<view class="pad-tb-30 bordbottom display-sb align-items" v-for="item in list" :key="item.id">
				<view class="width-80">
					<view class="fontSize-28 text-clamp-2">{{item.memo}}</view>
					<view class="mar-top-8 col-9 fontSize-26">{{item.create_time_text}}</view>
				</view>
				<view>
					<view class="fontSize-32" :class="item.score > 0 ? 'col-E23737' : 'col-333'">
						{{item.score > 0 ? '+' : ''}}{{item.score}}
					</view>
				</view>
			</view>
			
			<view class="text-align-center fontSize-28 col-6 pad-tb-40" v-if="list.length === 0">
				暂无积分记录
			</view>
		</view>
		
		<!-- 时间筛选弹窗 -->
		<view class="showwin" v-if="showwin" @click="closeshowwin">
			<view class="showwin_con" @click.stop>
				<view class="fontSize-32 text-align-center pad-tb-30">选择时间</view>
				<view class="pad-lr-30">
					<view class="display align-items mar-top-20">
						<view class="fontSize-28">开始时间</view>
						<picker mode="date" :value="start_time" @change="startTimeChange">
							<view class="ml20 fontSize-28 col-6">{{start_time}}</view>
						</picker>
					</view>
					<view class="display align-items mar-top-20">
						<view class="fontSize-28">结束时间</view>
						<picker mode="date" :value="end_time" @change="endTimeChange">
							<view class="ml20 fontSize-28 col-6">{{end_time}}</view>
						</picker>
					</view>
				</view>
				<view class="display align-items mar-top-40">
					<view class="width-50 text-align-center fontSize-32 col-6 pad-tb-20" @click="closeshowwin">取消</view>
					<view class="width-50 text-align-center fontSize-32 col-E23737 pad-tb-20" @click="confirmFilter">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { integral, user } from '@/utils/api';
import { onLoad, onShow } from '@dcloudio/uni-app';

const userScore = ref(0);
const list = ref([]);
const showwin = ref(false);
const start_time = ref('');
const end_time = ref('');

onLoad(() => {
	// 获取用户积分信息
	getUserScore();
	// 获取积分明细
	getIntegralList();
});

onShow(() => {
	// 页面显示时刷新数据
	getUserScore();
	getIntegralList();
});

// 获取用户积分信息
const getUserScore = async () => {
	try {
		const res = await user();
		if (res.code === 1 && res.data.user) {
			userScore.value = res.data.user.score || 0;
		}
	} catch (error) {
		console.error('获取用户积分失败:', error);
	}
};

// 获取积分明细
const getIntegralList = async () => {
	try {
		const res = await integral({
			limit: 20
		});
		if (res.code === 1) {
			list.value = res.data.integral_log.data || [];
		}
	} catch (error) {
		console.error('获取积分明细失败:', error);
		uni.showToast({
			title: '获取积分明细失败',
			icon: 'none'
		});
	}
};

// 打开时间筛选弹窗
const openshowwin = () => {
	showwin.value = true;
	// 设置默认时间
	const now = new Date();
	const oneMonthAgo = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);
	start_time.value = formatDate(oneMonthAgo);
	end_time.value = formatDate(now);
};

// 关闭时间筛选弹窗
const closeshowwin = () => {
	showwin.value = false;
};

// 开始时间改变
const startTimeChange = (e) => {
	start_time.value = e.detail.value;
};

// 结束时间改变
const endTimeChange = (e) => {
	end_time.value = e.detail.value;
};

// 确认筛选
const confirmFilter = () => {
	// 这里可以根据时间筛选积分记录
	// 暂时关闭弹窗
	closeshowwin();
	// 重新获取数据
	getIntegralList();
};

// 格式化日期
const formatDate = (date) => {
	const year = date.getFullYear();
	const month = String(date.getMonth() + 1).padStart(2, '0');
	const day = String(date.getDate()).padStart(2, '0');
	return `${year}-${month}-${day}`;
};

</script>

<style lang="scss">
.hetop {
	padding-top: 0;
	margin-top: 0;
}

.my_bi_view {
	height: 240rpx;
	background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.bordbottom {
	border-bottom: 1px solid #F1F1F1;
}

.showwin {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.showwin_con {
	background: #fff;
	border-radius: 16px;
	width: 80%;
	max-width: 400px;
}

.text-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
</style>
